<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS 层次选择器示例</title>
    <style>
        /* 1. 后代选择器（空格） */
        div p {
            color: red;
        }

        /* 2. 子选择器（>） */
        div > p {
            font-weight: bold;
            color: blue;
        }

        /* 3. 相邻兄弟选择器（+） */
        h1 + p {
            color: green;
            font-style: italic;
        }

        /* 4. 通用兄弟选择器（~） */
        h1 ~ p {
            color: orange;
        }
    </style>
</head>
<body>
<h2>1. 后代选择器（div p）</h2>
<div>
    <p>我是 div 里的 p（会变红）</p>
    <span>
            <p>我是嵌套在 span 里的 p（也会变红）</p>
        </span>
</div>
<p>我是外部的 p（不会变红）</p>

<hr>

<h2>2. 子选择器（div > p）</h2>
<div>
    <p>我是 div 的直接子元素 p（蓝色+加粗）</p>
    <span>
            <p>我是嵌套在 span 里的 p（不会变蓝）</p>
        </span>
</div>

<hr>

<h2>3. 相邻兄弟选择器（h1 + p）</h2>
<h1>我是标题 h1</h1>
<p>紧跟在 h1 后的 p（绿色+斜体）</p>
<p>第二个 p（不会受影响）</p>

<hr>

<h2>4. 通用兄弟选择器（h1 ~ p）</h2>
<h1>我是标题 h1</h1>
<p>第一个 p（橙色）</p>
<p>第二个 p（橙色）</p>
<p>第三个 p（橙色）</p>
</body>
</html>
